<template>
  <div class="card-item">
      <a :href="item.url">
        <div class="card-list">
       <div class="title" >{{index+1}}.{{item.title}} </div>
       <img :src="item.thumbnail_pic_s" alt=""> 
         <p>{{item.date}}</p>
        </div>
      </a>
    </div>
</template>

<script>
export default {
 name : 'cardItem',
 props: {
     item:String,
     index:Number
 }
}
</script>

<style lang="scss" scoped>
.card-item:nth-child(1) {
   padding-top: .90rem;
}
.card-item {
       .card-list{
       .title{ 
          color: #666;
           font-size: .2rem;
           margin-bottom: .1rem;
       }
       img{
         height: 100%;
         width: 100%;
         object-fit:cover;
       }
       p{
            color: #666;
           font-size: .1rem;
           margin-bottom: .1rem;
           margin-left: 3rem;
         
       }
   }
}


</style>